﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="Cms.Web.CmsSystem.SysModules.TabPage.List" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>标签设置</title>
    <link href="/App_Themes/default/CoreEdit.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <link href="/App_Themes/Default/easyui/easyui.css" rel="stylesheet" type="text/css" />
    <link href="/App_Themes/Default/easyui/icon.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <link href="/App_Themes/Default/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/zTree/jquery.ztree.core-3.4.min.js" type="text/javascript"></script>
    <link href="/Images/Icon.ashx?size=16" rel="stylesheet" type="text/css" />
    <script src="/Scripts/core.js" type="text/javascript"></script>
    <script src="/Scripts/form.js" type="text/javascript"></script>
    <style type="text/css">
        #IconPanel
        {
            display: none;
            width: 400px;
            border: 1px solid #ace;
            margin-left: 100px;
            height: 200px;
            overflow: scroll;
        }
        .icon
        {
            float: left;
            margin: 2px;
            border: 2px solid #fff;
            cursor: pointer;
            width: 16px;
            height: 16px;
        }
        .icon:hover
        {
            border: 2px solid #ace;
        }
        #dicon
        {
            display: inline-block;
            height: 16px;
            border: 0;
            background-color: #fff;
        }
    </style>
    <script type="text/javascript">
        var TreeJson = [<%=TreeJson%>];
        var tabType={
            <%= JsTabtype%>
        };
        var setting = {
            view: {
                showLine: true,
                selectedMulti: false,
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: this.onClick
            }
        };
        var action="";
        function onClick(e, treeId, node) { 
            action ="modify";
            formLoad("tabpage",node["id"],null,function(){
                $("[name=TAB_TYPE]").trigger("change");
                var className="icon "+$("[name='ICON']").val();
                $("#dicon").attr("class",className)
            });            
            $("#btnSave").removeAttr("disabled");
        }
        function ClearText(){
           $("[name]").each(function(){
            $(this).val("");
           });
           $("[name=DISPLAYID]").val("0");
        }
        $(function() {           
            $.fn.zTree.init($("#treeDemo"), setting, TreeJson);

            var h = GetInnerHeight();
            var w=  GetInnerWidth();
            $("body").css({ width: w + "px", height: h + "px" }).layout({fit:true});
            $("#tabs").tabs({height:h,width:w-150});            
            $("textarea").each(function() {
                $(this).css({ width: "100%", height: (h-40) + "px", "overflow": "auto", "border": "0", "margin": "0", "padding": "0" });
            });
            $("#btnAddParent").click(function(){
                action="addparent";
                var guid=newGuid();
                ClearText();
                $("[name=ID]").val(guid);
                $("[name=PARENTID]").val("");
                $("#btnSave").removeAttr("disabled");
            });
            $("#btnAddChild").click(function(){
                action ="addchild";                
                ClearText();
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                var nodes = zTree.getSelectedNodes();
                var guid=newGuid();
                var pid=nodes[0]["id"];
                $("[name=ID]").val(guid);
                $("[name=PARENTID]").val(pid);
                $("#btnSave").removeAttr("disabled");
            });
            $("#btnSave").click(function(){   
                if($("[name=TAB_TYPE]").val()==tabType.WptList){
                    var html=$("#frmlayout")[0].contentWindow.ReturnOk();  
                    $("[name=LAYOUT]").val(html);
                }
                formSubmit("tabpage",null,function(data){
                	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				    var nodes = zTree.getSelectedNodes();
                    if(action=="addparent"){                        
                        var id=$("[name=ID]").val();	
                        var title=$("[name=TITLE]").val();	
				        treeNode = zTree.addNodes(null, {id:id, pId:"", isParent:false, name:title});
				        zTree.selectNode(treeNode);
				    }else
				    if(action=="addchild"){

                        var id=$("[name=ID]").val();
                        var pid=$("[name=PARENTID]").val();		
                        var title=$("[name=TITLE]").val();	
				        treeNode = zTree.addNodes(nodes[0], {id:id, pId:pid, isParent:false, name:title});
				    }
				    else{
				        nodes[0]["name"]=$("[name=TITLE]").val();
				        zTree.updateNode(nodes[0]);
				    }
				    $("#btnSave").attr("disabled","true");
                });
            });
            $("#btnDelete").click(function(){
                var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			    nodes = zTree.getSelectedNodes(),
			    treeNode = nodes[0];
			    if (nodes.length == 0) {
				    alert("请先选择一个节点");
				    return;
			    }
			    FormDelete("tabpage",treeNode["id"],function(data){
			        if(data && data!=""){
			            var result=eval("("+data+")");
			            if(result["Result"]){
			                zTree.removeNode(treeNode, true);
			                ClearText();
			            }
			        }
			    });		    
			    
            });
           $("#btnExpand").click(function(){
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.expandAll(true);
            });
            $("#btnCollapse").click(function(){
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.expandAll(false);
            });
            $("#btnExpand").trigger("click");
            $("[name=TAB_TYPE]").change(function(){
                var v=$(this).val();
                if(v==tabType.WptList){
                    $("[name=LAYOUT]").hide();
                    var id=$("[name=ID]").val();	
                    if(id && id!="")
                        $("#frmlayout").attr("src","wptlayout.aspx?id="+id).show();
                }
                else{
                    $("#frmlayout").hide();
                    $("[name=LAYOUT]").show();                    
                }
            });
           setTimeout(function(){
                var p=$("body").layout("panel", "center");
                $("#frmlayout").css("width",p.width()-2+"px").css("height",p.height()-30+"px");
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                var nodes = zTree.getNodes();
                if(nodes.length>0){
                    zTree.selectNode(nodes[0]);
                    onClick(null,"treeDemo",nodes[0]);
                }
           },200);
           $("#btnChooseIcon").click(function(){
                var offset=$("[name='ICON']").offset();
                $("#IconPanel").toggle();
           });
           $("#IconPanel .icon").click(function(){
                var className=$(this).attr("class");
                $("#dicon").attr("class",className)
                $("[name='ICON']").val(className.split(" ")[1]);
           });
        });
    </script>
</head>
<body>
    <div region="north" style="height: 40px; line-height: 40px; overflow: hidden;" split="false">
        <input type="button" class="button" id="btnAddParent" value="增加根节点" />
        <input type="button" class="button" id="btnAddChild" value="增加子节点" />
        <input type="button" class="button" id="btnSave" value="保存" />
        <input type="button" class="button" id="btnDelete" value="删除" />
        <input type="button" class="button" id="btnExpand" value="全部展开" />
        <input type="button" class="button" id="btnCollapse" value="全部折叠" />
    </div>
    <div region="west" style="width: 200px;" split="true">
        <ul class='ztree' id="treeDemo">
        </ul>
    </div>
    <div region="center" style="overflow: hidden; margin: 0; padding: 0;">
        <form>
        <div id="tabs">
            <div title="明细">
                <div class="row">
                    <label class="label">
                        编号</label>
                    <label class="input">
                        <input type="text" name="ALIAS" />
                        <input type="hidden" name="ID" />
                        <input type="hidden" name="PARENTID" />
                    </label>
                </div>
                <div class="row">
                    <label class="label">
                        标题</label>
                    <label class="input">
                        <input type="text" name="TITLE" />
                    </label>
                </div>
                <div class="row">
                    <label class="label">
                        类型</label>
                    <label class="input">
                        <select name="TAB_TYPE">
                            <%=Options%>
                        </select>
                    </label>
                </div>
                <div class="row">
                    <label class="label">
                        序号</label>
                    <label class="input">
                        <input type="text" name="DISPLAYID" value="0" />
                    </label>
                </div>
                <div class="row">
                    <label class="label">
                        需要登录</label>
                    <label class="input">
                        <input type="checkbox" name="MUSTLOGIN" checked="checked" />
                    </label>
                </div>
                <div class="row">
                    <label class="label">
                        发布</label>
                    <label class="input">
                        <input type="checkbox" name="ISPUBLISH" />
                    </label>
                </div>
                <div class="row">
                    <label class="label">
                        图标</label>
                    <label class="input">
                        <input type="text" name="ICON" readonly style="width: 100px; float: left;" />
                        <input type="button" id="dicon" class="icon " style="padding: 3px;" />
                        <input type="button" id="btnChooseIcon" style="float: left;" value="选择" />
                    </label>
                </div>
                <div class="row">
                    <%=IconBuilder() %>
                </div>
            </div>
            <div title="布局/内容">
                <textarea name="LAYOUT" fit="true"></textarea>
                <iframe id="frmlayout" src="#" frameborder="0" scrolling="auto"></iframe>
            </div>
        </div>
        </form>
    </div>
</body>
</html>
